<template>
 <loadingAction v-if="loading"></loadingAction>
        <!-- 搜索区域 -->
        <el-form :inline="true" :model="formWell" class="demo-form-inline">
                <el-form-item label="油井名称">
                        <el-input v-model="formWell.characteristic" clearable />
                </el-form-item>
                <el-form-item label="油井类型">
                        <el-select style="width: 240px" v-model="formWell.type" placeholder="油井类型" clearable>
                                <el-option v-for="item in wellType" :key="item.type" :label="item.label"
                                        :value="item.type" />
                        </el-select>
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" @click="onSubmit">
                                <el-icon><Search /></el-icon> 查询
                        </el-button>
                </el-form-item>
        </el-form>


 <div class="btns"> 
        <!-- 删除按钮 -->
        <el-button type="danger" @click="deleteWellByIds" :disabled="batchDel.length === 0"><el-icon>
                        <DeleteFilled />
                </el-icon>批量删除
        </el-button>

        <!-- 新增按钮 -->
        <el-button type="primary" @click="centerDialogVisible = true" class="addbtn">
                <el-icon>
                        <CirclePlus />
                </el-icon> 新增油井
        </el-button>
</div>

        <!-- 新增油井信息栏 -->
        <el-dialog v-model="centerDialogVisible" title="输入油井信息" width="500" align-center>
                井名称<el-input v-model="addWellName" style="width: 240px" class="input" /><br>
                油井类型<el-select class="select" v-model="value" placeholder="选择油井类型" size="large" style="width: 240px">
                        <el-option v-for="item in wellType" :key="item.type" :label="item.label" :value="item.type" />
                </el-select><br>
                井深度<el-input v-model="addWellDepth" style="width: 240px" class="input" /><br>
                井口直径<el-input v-model="addwellDiameter" style="width: 240px" class="input" /><br>
                成井时间<el-date-picker v-model="addwellDate" type="date" placeholder="选择成井时间" :size="size"
                        style="margin: 10px;" />

                <template #footer>
                        <div class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取消</el-button>
                                <el-button type="primary"
                                        @click="addWellForm(addWellName, value, addWellDepth, addwellDiameter, addwellDate)">
                                        添加
                                </el-button>
                        </div>
                </template>
        </el-dialog>


        <!-- 油井列表 -->
        <el-table :data="tableData" height="350" style="width: 1100px;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="id" width="180" v-if="false">
                        <template #default="scope">
                                <div style="display: flex; align-items: center">
                                        <span>{{ scope.row.wellName }}</span>
                                </div>
                        </template>
                </el-table-column>

                <el-table-column label="井名称" width="180">
                        <template #default="scope">
                                <div style="display: flex; align-items: center">
                                        <span>{{ scope.row.wellName }}</span>
                                </div>
                        </template>
                </el-table-column>
                <el-table-column label="井类型" width="160">
                        <template #default="scope">
                                <div style="display: flex; align-items: center">
                                        <span>{{ scope.row.wellType }}</span>
                                </div>
                        </template>
                </el-table-column>
                <el-table-column label="井深度" width="160">
                        <template #default="scope">
                                <div style="display: flex; align-items: center">
                                        <span>{{ scope.row.wellDepth }}米</span>
                                </div>
                        </template>
                </el-table-column>
                <el-table-column label="井口直径" width="180">
                        <template #default="scope">
                                <div style="display: flex; align-items: center">
                                        <span>{{ scope.row.wellDiameter }}米</span>
                                </div>
                        </template>
                </el-table-column>
                <el-table-column label="成井时间" width="180">
                        <template #default="scope">
                                <div style="display: flex; align-items: center">
                                        <el-icon>
                                                <timer />
                                        </el-icon>
                                        <span>{{ scope.row.wellDate }}</span>
                                </div>
                        </template>
                </el-table-column>
                <el-table-column label="操作">
                        <template #default="scope">
                                <el-button size="10" type="primary" @click="update(scope.row.id)">
                                        <el-icon>
                                                <EditPen />
                                        </el-icon> 更新
                                </el-button>
                                <el-button size="10" color="red" type="danger" @click="deleteWellByIds(scope.row.id)">
                                        <el-icon>
                                                <DeleteFilled />
                                        </el-icon> 删除
                                </el-button>
                        </template>
                </el-table-column>
        </el-table>


        <!-- 修改油井信息 -->
        <el-dialog v-model="updateDialogVisible" title="修改油井信息" width="500" center>

                井名称<el-input v-model="updateWellName" style="width: 240px" class="input" /><br>
                油井类型<el-select class="select" v-model="updateWellType" placeholder="选择油井类型" size="large" style="width: 240px">
                        <el-option v-for="item in wellType" :key="item.type" :label="item.label" :value="item.type" />
                </el-select><br>
                井深度<el-input v-model="updateWellDepth" style="width: 240px" class="input" /><br>
                井口直径<el-input v-model="updatewellDiameter" style="width: 240px" class="input" /><br>

                <template #footer>
                        <div class="dialog-footer">
                                <el-button @click="updateDialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="updateWell1">
                                        提交
                                </el-button>
                        </div>
                </template>
        </el-dialog>




        <!-- 分页器 -->
        <div class="demo-pagination-block">
                <div class="demonstration"></div>
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                        hide-on-signle-page="false" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import { pageWell, addWell, updateWell, deleteWellById } from "@/api/wellManagement";
import { format } from 'date-fns'
import { ElMessage, ElMessageBox } from 'element-plus'
import loadingAction from '@/components/loadingAction/loadingAction.vue'
import { number } from 'echarts';




//油井类型
const wellType = [
        {
                type: 1,
                label: '垂直油井',
        },
        {
                type: 2,
                label: '定向斜油井',
        },
        {
                type: 3,
                label: '水平油井',
        },
]

const addWellName = ref()
const value=ref('')
const total = ref()
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const addWellDepth = ref()
const addwellDiameter = ref()
const addwellDate = ref()
const size = ref<'default' | 'large' | 'small'>('default')
const loading=ref(true)
//分页数据
const pageINfo = {
        page: 1,
        pageSize: 10,
}

//查询表单数据
const formWell = reactive({
        characteristic: '',
        type: '',
})



const updateWellDepth = ref()
const updatewellDiameter = ref()
const updateWellName = ref()
const updateWellId=ref()
const updateWellType=ref()
const centerDialogVisible = ref(false)
const updateDialogVisible = ref(false)
  

onMounted(() => {       //钩子函数调用渲染方法，展示油井列表
        pageWellList(pageINfo)
        setTimeout(() => {
               loading.value=false 
        }, 300);
})


let tableData = ref([])
let batchDel = ref([] as number[])

//请求油井数据
function pageWellList(pageINfo: object,formWell?:object) {
        pageWell(pageINfo).then((res) => {
                tableData.value = res.data.data.records
                total.value=res.data.data.total
        }).catch((error) => {
                alert(error)
        })
}

//增加新的油井
function addWellForm(addWellName: string, wellType: any, addWellDepth: number, addwellDiameter: number, addwellDate: string) {
        const date = format(addwellDate, 'yyyy-MM-dd')
        const well = reactive({
                addWellName, wellType, addWellDepth, addwellDiameter, date
        })

        console.log(well)
        addWell(addWellName, wellType, addWellDepth, addwellDiameter, date).then((res) => {
                if (res.data.code == 200)
                        ElMessage.success("添加成功")
                pageWellList(pageINfo)
        }).catch(() => {
                ElMessage.error("添加失败，请检查数据是否有误或该井已存在")
        })
        centerDialogVisible.value = false
}

//获取更改行id
function update(wellId:number){
        updateWellId.value=wellId
        updateDialogVisible.value=true
}

//更改油井数据
function updateWell1() {
        console.log(updateWellId.value,updateWellName.value,updateWellType.value)
        updateWell(updateWellId.value,updateWellName.value, updateWellType.value, updateWellDepth.value, updatewellDiameter.value).then((res) => {
                if (res.data.code == 200)
                        ElMessage.success("更改成功")
                pageWellList(pageINfo)
        }).catch(() => {
                ElMessage.error("更改失败，请检查数据是否有误或该井已存在")
        })
        updateDialogVisible.value = false

}


//删除油井
function deleteWellByIds(ids: number) {
        batchDel.value.push(ids)
        console.log(batchDel.value)
        ElMessageBox.confirm(
                '此操作会删除数据，是否继续',
                '警告',
                {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                        showClose: false
                }
        )
                .then(() => {
                        deleteWellById(batchDel.value).then((res) => {
                                if (res.data.code == 200) {
                                        ElMessage({
                                                type: 'success',
                                                message: '删除完成',
                                        })
                                        batchDel.value = []
                                        pageWellList(pageINfo)
                                } else {
                                        ElMessage({
                                                type: 'error',
                                                message: '删除失败',
                                        })
                                        batchDel.value = []
                                }
                        })
                                .catch(() => {
                                        ElMessage({
                                                type: 'error',
                                                message: '删除失败',
                                        })
                                })
                        batchDel.value = []
                })
}

//获取所选行id
function handleSelectionChange(well: any[]) {
        batchDel.value = well.map(item => item.id)
        console.log(batchDel.value)
}


//提交查询表单
function onSubmit () {
        console.log(formWell)
        console.log(pageINfo)
        pageWell(pageINfo,formWell).then((res) => {
                tableData.value = res.data.data
                ElMessage.success("查询成功")
        }).catch(() => {
                ElMessage.error("查询失败，数据不存在")
        })
}

//设置每页条数--------分页
const handleSizeChange = (val: number) => {
        pageINfo.pageSize=val
        pageWellList(pageINfo)
}

//设置当前页数--------分页
const handleCurrentChange = (val: number) => {
        pageINfo.page=val
        pageWellList(pageINfo)
}
</script>


<style scoped>
.demo-pagination-block+.demo-pagination-block {
        margin-top: 10px;
}

.demo-pagination-block{
        margin-left: 40px;
}
.demo-pagination-block .demonstration {
        margin-bottom: 16px;
}

.addbtn {
        cursor: pointer;

}

.addbtn :hover {
        opacity: 0.8;
}

.input {
        margin: 10px;
}

.select {
        margin: 10px;
}

.el-form {
        margin: 20px;
}
.btns{
        margin: 20px;
}
</style>